<template>
  <div class="reibody" ref='reibody' @click="Body">
    <!--:style="{top:TopNum + 'px'}"-->
    <div class="FinancialDetail" ref='reibody2' id="gundong" :class="HeightCheck?'PayNoticeTrue':'PayNoticeFalse'">
      <!--			<div class="FinancialDetail" ref='body2'>-->
      <div class="FinancialDetail-Header">
        <div class="FinancialDetail-Header-Title">
          <div class="FinancialDetail-Header-Title-Left">

          </div>
          <div class="FinancialDetail-Header-Title-Right">
            存款理财-{{bankInfo.bank_name?bankInfo.bank_name:'获取中'}}
          </div>
        </div>
        <div class="FinancialDetail-Header-Name">
          {{bankInfo.product_name?bankInfo.product_name:'获取中'}}
        </div>
        <div class="FinancialDetail-Header-Rate">
          <span>+</span><span>{{bankInfo.expected_yield?bankInfo.expected_yield:"0"}}%</span>
        </div>
        <div class="FinancialDetail-Header-Tips">
          {{bankInfo.remark}}
        </div>

      </div>
      <div class="FinancialDetail-Body">
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">货币类型:</div>
          <div class="FinancialDetail-Body-Item-Right">
            {{bankInfo.money_type=='1'?'人民币':"美元"}}
          </div>
        </div>
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">保险产品编号:</div>
          <div class="FinancialDetail-Body-Item-Right">
            {{bankInfo.product_code?bankInfo.product_code:"xxxxxxxx"}}
          </div>
        </div>
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">理财期:</div>
          <div class="FinancialDetail-Body-Item-Right">
            {{bankInfo.financial_period?bankInfo.financial_period:"xx"}}期
          </div>
        </div>
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">起购金额:</div>
          <div class="FinancialDetail-Body-Item-Right">
            {{bankInfo.purchase_amount?bankInfo.purchase_amount:"0"}}元
          </div>
        </div>
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">限购金额:</div>
          <div class="FinancialDetail-Body-Item-Right">
            {{bankInfo.purchasing_amount?bankInfo.purchasing_amount:"0"}}元
          </div>
        </div>
        <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">附加权益:</div>
          <div class="FinancialDetail-Body-Item-Right">
           {{bankInfo.explain}}
          </div>
        </div>

        <!-- <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">认购额度:</div>
          <div class="FinancialDetail-Body-Item-Ipt" @click.stop="ClickMoney">
            <span>￥</span>
            <ipt ref='ipt'></ipt>
          </div>
        </div> -->
        <!-- <div class="FinancialDetail-Body-Item">
          <div class="FinancialDetail-Body-Item-Left">付款方式:</div>
          <div class="FinancialDetail-Body-Item-Right2">
            <div class="FinancialDetail-Body-Item-Right-wt" :class="[wtState ? 'FinancialDetail-Body-Item-Right-wt2' : 'FinancialDetail-Body-Item-Right-wt']"
              @click="wtItem()">委托代扣</div>
            <div class="FinancialDetail-Body-Item-Right-zj" :class="[zjState ? 'FinancialDetail-Body-Item-Right-zj2' : 'FinancialDetail-Body-Item-Right-zj']"
              @click="zjItem()">直接支付</div>
          </div>
        </div> -->
        <div class="FinancialDetail-Body-Tips">
          购买截止日期{{bankInfo.sale_date}}
        </div>
      </div>
      <!-- <div class="FinancialDetail-Tips">
        输入支付密码
      </div>
      <div class="FinancialDetail-Input" @click.stop="IptPwd">
        <PassWord :top="true" :topn='true' v-on:Topnum="GetTopNum" ref='psd'></PassWord>
      </div>
      <div class="FinancialDetail-Confirm">
        <button @click="Pay()">确认支付</button>
      </div> -->
    </div>
    <!-- <transition name="fade">
      <Message :mes="mes" :check='TdChecked' v-on:check="check1"></Message>
    </transition>
    <KeyOnly ref='KeyOnly'></KeyOnly>
    <Key ref='Key'></Key> -->
  </div>
</template>

<script>
  import PassWord from '@/assets/assembly/PassWord'
  import Message from '@/assets/assembly/Message'
  import Ipt from '@/assets/assembly/Ipt'
  import KeyOnly from '@/assets/assembly/KeyOnly'
  import Key from '@/assets/assembly/Key'
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'FinancialDetail',
    data() {
      return {
        wtState: false,
        zjState: true,
        TopNum: 0,
        Stu: false,
        mes: '',
        TdChecked: false,
        Numdata: '',
        HeightCheck: false,
        bankInfo: ''
      }
    },
    created: function () {
      if (sessionStorage.getItem('Financial') != null) {
        this.getFinancial(JSON.parse(sessionStorage.getItem('Financial')));
      } else {
        Toast({
          message: '响应超时，请重试',
          duration: 1000
        });
        setTimeout(() => {
          Indicator.close();
          vm.$router.push({
            path: `/FinancialDetail`
          })
        }, 1000);
      }
    },
    components: {
      PassWord,
      Message,
      Ipt,
      KeyOnly,
      Key
    },
    methods: {
      wtItem() {
        this.wtState = true;
        this.zjState = false;
      },
      zjItem() {
        this.wtState = false;
        this.zjState = true;
      },
      GetTopNum: function (Num) {},
      Pay() {
        if (parseInt(this.$refs.ipt.Num) < 10000) {
          this.mes = '认购额度不得小于10000.00'
          this.TdChecked = true
        } else if (this.$refs.psd.Pwd.length < 6) {
          this.mes = '请输入密码'
          this.TdChecked = true
        } else {
          this.$router.push({
            path: `/Index`
          })
        }
      },
      check1(e) {
        this.TdChecked = e
      },
      Body() {
        this.$refs.ipt.GbStu = false;
        this.$refs.KeyOnly.BottomStu = false;
        this.HeightCheck = false;
        this.$refs.Key.BottomStu = false;
      },
      ClickMoney() {
        this.$refs.reibody2.scrollTop = this.$refs.reibody2.scrollHeight;
        this.$refs.ipt.GbStu = true;
        this.$refs.KeyOnly.BottomStu = true;
        this.HeightCheck = true;
        this.$refs.Key.BottomStu = false;
      },
      IptPwd() {
        this.$refs.reibody2.scrollTop = this.$refs.reibody2.scrollHeight;
        this.HeightCheck = true;
        this.$refs.Key.BottomStu = true;
        this.$refs.KeyOnly.BottomStu = false;
        this.$refs.ipt.GbStu = false;
      },
      // 获取详情
      getFinancial(e) {
        var vm = this;
        Indicator.open({
          text: '加载中...',
        });
        this.$ApiCom.Product(e.tyoe, e.product_id).then(function (res) {
          Indicator.close();
          vm.bankInfo = res.data.data.productDetail;
        }, function (err) {
          //   响应超时
          Indicator.close();
          Toast({
            message: '响应超时，请重试',
            duration: 1000
          });
          setTimeout(() => {
            Indicator.close();
            vm.$router.push({
              path: `/FinancialDetail`
            })
          }, 1000);
        })
      }
    },
    mounted() {
      var vm = this;
      this.bus.$on('BottomStu', function (BottomStu) {
        vm.HeightCheck = BottomStu
      });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path == `/Index`) {
            to.meta.keepAlive = true;
        } else {
            to.meta.keepAlive = false;
        }
        next();
    }
  }

</script>

<style scoped>
  @import url("css/FinancialDetail.css");

</style>
